body, html {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2f3542;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2f3542;
}
.button-wrapper{
    position: relative;
    width: 240px;
    height: 60px;
    text-align: center;
}
.rectangle {
    stroke-width: 8px;
    stroke: #ff6348;
    fill : transparent;
    stroke-dasharray: 100 500;
    stroke-dashoffset: -374;
}
.btn {
    color : white;
    font-size : 18px;
    letter-spacing: 6px;
    position: relative;
    top: -48px;
}
@keyframes extend {
    to {
        stroke-dasharray: 600;
        stroke-dashoffset: 0;
        stroke-width: 2px;
    }
}

.button-wrapper:hover .rectangle {
    animation: extend .5s linear forwards;
}











